<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>loop</title>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>
  <div id="app">
    <!-- 循环使用 v-for 指令。
        v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
        v-for 可以绑定数据到数组来渲染一个列表 
    -->
    <ol>
      <li v-for="site in sites">
        {{site.name}}
      </li>
    </ol>

    <br><br>

    <!-- 模板中使用 v-for： -->
    <ul>
      <template v-for="site in sites">
        <li>{{site.name}}</li>
        <li>----------</li>
      </template>
    </ul>

    <br><br>
    <!-- v-for 迭代对象
         v-for 可以通过一个对象的属性来迭代数据： 
    -->
    <ul>
      <li v-for="value in object">
        {{value}}
      </li>
    </ul>

    <br><br>
    <!-- 你也可以提供第二个的参数为键名 -->
    <ul>
      <li v-for="(value,key) in object">
        {{key}} : {{value}}
      </li>
    </ul>
    <br><br>

    <!-- 第三个参数为索引： -->
    <ul>
      <li v-for="(value,key,index) in object">
        {{index}}. {{key}} : {{value}}
      </li>
    </ul>
    <br><br>
    
    <!-- v-for 迭代整数
         v-for 也可以循环整数 -->
    <ul>
      <li v-for="n in 10">{{n}}</li>
    </ul>

  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        sites: [
          {
            name: 'Runoob'
          }, {
            name: 'Google'
          }, {
            name: 'Taobao'
          }
        ],
        object: {
          name: '菜鸟教程',
          url: 'http://www.runoob.com',
          slogan: '学的不仅是技术,更是梦想!'
        }
      }
    })

  </script>
</body>

</html>